<template>
  <div>
    <!--头部  -->
    <div class="select_head">
      <!-- 返回按钮 -->
      <i @click="backIndex()" class="el-icon-back back"></i>
      <!-- 输入框 -->
      <van-search
        class="index_search"
        shape="round"
        background="#6c90f3"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
      <!-- 搜索图标 -->
      <van-icon
        class="search"
        name="search"
        @click="SouSuoss()"
        color="whitesmoke"
        size="30"
      />
    </div>
    <!-- 身体 -->
    <div v-show="show">
      <div>
        <el-link
          ><i class="el-icon-thumb"></i
          ><span class="select_word">热门搜索</span>
        </el-link>
      </div>
      <div class="select_body">
        <el-button type="info" round
          ><i class="el-icon-s-platform"></i>电脑</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-present"></i>新品</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-headset"></i>耳机</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-s-data"></i>排行</el-button
        >
      </div>
      <div class="select_body">
        <el-button type="info" round
          ><i class="el-icon-chat-dot-round"></i>钉钉</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-camera-solid"></i>美图</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-date"></i>日历</el-button
        >
        <el-button type="info" round
          ><i class="el-icon-collection"></i>阅读</el-button
        >
      </div>
    </div>
    <div v-show="show1">
      <van-tabs
        background="#6c90f3"
        title-inactive-color="white"
        class="index_tab"
        v-model="active"
        sticky
      >
        <van-tab title="应用">
          <div
                @click.stop="jumpDetail(item, index)"
                class="guess_like_show"
                v-for="(item, index) in softList"
                :key="index"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item.app_image_road"
                />
                <span class="guess_like_sp1">{{ item.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item.app_downloding_times }}</span
                >
                <van-button
                  @click.stop="downloadButton(item, index)"
                  class="guess_like_small"
                  size="small"
                  round
                  type="info"
                  >下载</van-button
                >
              </div>
        </van-tab>
        <van-tab title="数码">
          <div
                @click.stop="jumpDetail(item, index)"
                class="guess_like_show"
                v-for="(item, index) in digitalList"
                :key="index"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item.app_image_road"
                />
                <span class="guess_like_sp1">{{ item.app_name }}</span>
                <span class="guess_like_sp2"
                  >下载次数：{{ item.app_downloding_times }}</span
                >
              </div>
        </van-tab>
        <van-tab title="话题">
          <div
                @click.stop="jumpDetail(item, index)"
                class="guess_like_show"
                v-for="(item, index) in topicList"
                :key="index"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item.topic_image_road"
                />
                <span class="guess_like_sp1">{{ item.topic_name }}</span>
                <span class="guess_like_sp2"
                  >热度：{{ item.topic_hot_number }}</span
                >
              </div>
        </van-tab>
        <van-tab title="用户">
          <div
                @click.stop="jumpDetail(item, index)"
                class="guess_like_show"
                v-for="(item, index) in userList"
                :key="index"
              >
                <van-image
                  radius="10"
                  class="guess_like_img"
                  width="50"
                  height="50"
                  :src="item.user_image_road"
                />
                <span class="guess_like_sp1">{{ item.user_name }}</span>
                <span class="guess_like_sp2"
                  >关注：{{ item.user_follow_number }}</span
                >
              </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
 
<script>
import { Toast } from 'vant';
import http from '../api/index';
export default {
  data() {
    return {
      value: '',
      active: 1,
      careList: [],
      routeFrom: '',
      show: true,
      show1:false,
      active: 0,
      softList: [],
      digitalList: [],
      topicList: [],
      userList: [],
    };
  },
  watch: {
    value() {
      if (this.value === '') {
        this.show = true;
        this.show1 = false;
      }
    },
  },
  methods: {
    // 跳到详情
    jumpDetail(item, index) {
      this.$router.push('/softDetails/' + item.app_id);
    },
    // 下载
    downloadButton(item, index) {
      window.location.href =
        'http://whole555.oss-cn-beijing.aliyuncs.com/whole/2020/10/15/16027471177286380.apk';
      http.downloadTimes({
        app_id:item.app_id
      }).then(r => {
        console.log(r);
        item.app_downloding_times=r.data;
      })
    },
    SouSuoss() {
      if (this.value !== '') {
        this.show = false;
        this.show1 = true;
        http
          .souSuo({
            criteria: this.value,
          })
          .then((r) => {
            console.log(r);
            this.softList=r.data.App;
            this.digitalList=r.data.Digital;
            this.topicList=r.data.Topic;
            this.userList=r.data.User;
          });
      }
    },
    backIndex() {
      this.$router.push(this.routeFrom);
      
    },
  },
  beforeRouteEnter(to, from, next) {
    // 官方解释在此无法获取组件的this，还没创建
    // 可以使用next函数的回调，可以获取创建之前的组件实例
    next(function (vm) {
      // vm就是当前组件的实例，把从哪来的路径赋值给当前组件中的变量
      vm.routeFrom = from.path;
    });
  },
};
</script>
<style scoped>
.guess_like {
  width: 96%;
  margin: 0 auto;
  border-radius: 1.5rem;
  background-color: white;
}
.guess_text {
  position: relative;
}
.guess_text_sp1 {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 1.6rem;
}
.guess_arrow {
  position: absolute;
  right: 1rem;
  top: 1.3rem;
  font-size: 2rem;
}
.guess_like_show {
  width: 96%;
  height: 6rem;
  position: relative;
  margin-top: 2rem;
}
.guess_like_img {
  position: absolute;
  top: 0px;
  left: 2rem;
  border-radius: 1rem;
}
.guess_like_sp1 {
  position: absolute;
  top: 0.1rem;
  left: 8.5rem;
  font-size: 1.8rem;
  color: #252525;
}
.guess_like_sp2 {
  position: absolute;
  top: 3rem;
  left: 8.5rem;
  font-size: 1.4rem;
  color: #7a7a7a;
}
.guess_like_small {
  position: absolute;
  top: 0.8rem;
  right: 0px;
  width: 7rem;
}
.select_head {
  width: 100%;
  height: 5.5rem;
  background-color: #6c90f3;
  position: sticky;
}
.index_search {
  position: absolute;
  width: 30rem;
  left: 2.8rem;
  top: 0rem;
}
.search {
  position: absolute;
  top: 1.3rem;
  right: 1.5rem;
}
.back {
  color: whitesmoke;
  font-size: 2.2rem;
  position: absolute;
  top: 1.5rem;
  left: 0.3rem;
}
.select_body {
  margin-left: 0.7rem;
  margin-top: 2rem;
}
.el-button {
  width: 7.5rem;
  height: 3rem;
  padding: 0;
  font-size: 1.5rem;
  margin-left: 1rem;
  margin-top: 1rem;
}
.el-link {
  margin-left: 2rem;
  margin-top: 2rem;
}
.select_word {
  font-size: 1.5rem;
  margin-left: 1rem;
}
</style>